<template>
    <div class="detail_container_template">
        <head-top signin-up='home'>
        </head-top>
        <div class="project-desc-container">
            <el-row type="flex" justify="center">
                <el-col :lg="14" :xl="14">
                    <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"
                                  @play="onPlayerPlay($event)"
                                  @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)"
                                  @loadeddata="onPlayerLoadeddata($event)"
                                  @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)"
                                  @timeupdate="onPlayerTimeupdate($event)"
                                  @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
                                  @ready="playerReadied"
                                  @statechanged="playerStateChanged($event)">
                    </video-player>
                </el-col>
                <el-col :lg="10" :xl="10">
                    <div class="desc-container">
                        <div class="tag">
                            <span>Funding</span>
                        </div>
                        <div class="seperator"></div>
                        <div class="title">
                            <span>{{campaign.title}}</span>
                        </div>
                        <div class="sub-title">
                            <span>
                                {{campaign.tagline}}
                            </span>
                        </div>
                        <div class="owner-info">
                            <p class="text">
                                Project Owner
                            </p>
                            <div class="detail">
                                <div class="icon" :style="getBGImage(avatar)"></div>
                                <div class="info">
                                    <p class="owner-name">
                                        <!--{{campaign.ownerName}}-->
                                        {{userName}}
                                    </p>
                                    <p class="owner-city">
                                        {{campaign.locationCity}},{{campaign.locationCountry}}
                                    </p>
                                </div>
                            </div>
                            <div class="campaign-info">
                                <div class="funding-detail">
                                    <span class="num">{{campaign.price}}</span>
                                    {{campaign.priceType}} To Be Raised
                                </div>
                                <div class="progress">
                                    <el-progress :percentage="0" status="success" :stroke-width="14"></el-progress>
                                </div>
                                <div class="percent-detail">
                                    <span class="num">0%</span>
                                    of {{campaign.price}} {{campaign.priceType}} fixed goal
                                    <span style="float: right;padding-right: 36px;">
                                        will end {{campaign.campaignDuration | dateFormat}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="extra-info">
            <el-row type="flex">
                <el-col :lg="14" :xl="14">
                    <div class="project-overview-container">
                        <div class="overview">
                            <div class="tag">
                                <span>Overview</span>
                            </div>
                            <div class="seperator"></div>
                        </div>
                        <div class="detail-info">
                            <div class="img-info" :style="getBGImage(campaign.overlayImage)"></div>
                            <div class="txt-info">
                                <p class="content" v-html="campaign.campaignOverview">

                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="project-extra-info-container">
                        <el-row type="flex" class="project-desc-container single-item" justify="center">
                            <el-col>
                                <project-extra-info-detail :campaign="campaign" :preview="true"></project-extra-info-detail>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :lg="10" :xl="10">
                    <project-feature :campaign="campaign" :peaksList="peaksList"></project-feature>
                </el-col>

            </el-row>
        </div>


        <div class="interest-project-container">
            <div class="interest-item-container">
                <el-row type="flex" class="tag-container" justify="center">
                    <el-col>
                        <section class="single-row">
                            <h2>Tags for this project</h2>
                        </section>
                        <div class="seperator"></div>
                        <div class="tags-area">
                            <el-tag type="info" v-for="(item, index) in campaign.tagList" class="tag-item">{{item}}
                            </el-tag>
                        </div>
                    </el-col>
                </el-row>
                <!--<el-row type="flex" class="project-desc-container" justify="center">
                    <el-col>
                        <section class="single-row">
                            <h2>You may also be interested in</h2>
                        </section>
                        <div class="seperator"></div>
                    </el-col>
                </el-row>
                <el-row type="flex" class="project-desc-container" justify="center">

                    <el-col>
                        <div class="single-item">
                            <el-row :gutter="20">
                                <el-col :span="6" v-for="(item, index) in fundingItem" :key="index" type="flext"
                                        justify="content">
                                    <funding-item :fundingItem="item"></funding-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>

                </el-row>-->
            </div>

        </div>
    </div>
</template>

<script>
    import headTop from 'components/header/head'
    import FundingItem from 'components/common/fundingItem'
    import moment from 'moment'
    import ProjectExtraInfoDetail from "./item/ProjectExtraInfoDetail"
    import ProjectFeature from "./item/ProjectFeature"
    import {mapState, mapMutations} from 'vuex'


    export default {
        data() {
            return {
                radio2: 1,
                fundingItem: [{
                    projectImage: 'static/img/ex11.png',
                    title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                    desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                    type: "MUSIC",
                    total: '340,176'
                },
                    {
                        projectImage: 'static/img/ex12.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    },
                    {
                        projectImage: 'static/img/ex13.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    },
                    {
                        projectImage: 'static/img/ex26.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    }
                ],
                queryText: ""
            }
        },

        mounted() {


        },
        components: {
            headTop,
            FundingItem,
            ProjectExtraInfoDetail,
            ProjectFeature
        },

        computed: {
            ...mapState({
                'userId': state => state.user.userId,
                'userName': state => state.user.name,
                'avatar': state => state.user.avatar,
                'campaign': state => state.campaign.item,
                'peaksList': state => state.campaign.peaksList,
            }),

            player() {
                return this.$refs.videoPlayer.player
            },
            playerOptions() {
                return {
                    height: '360',
                    autoplay: false,
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [{
                        type: "video/mp4",
                        // mp4
                        src: this.campaign.pitchVideo,
                        // webm
                        // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    }],
                    poster: this.campaign.campaignImage,
                }
            },
        },
        filters: {
            dateFormat(time) {
                return moment(time).startOf('mimute').fromNow()
            }
        },

        methods: {

            // listen event
            onPlayerPlay(player) {
                // console.log('player play!', player)
            },
            onPlayerPause(player) {
                // console.log('player pause!', player)
            },
            onPlayerEnded(player) {
                // console.log('player ended!', player)
            },
            onPlayerLoadeddata(player) {
                // console.log('player Loadeddata!', player)
            },
            onPlayerWaiting(player) {
                // console.log('player Waiting!', player)
            },
            onPlayerPlaying(player) {
                // console.log('player Playing!', player)
            },
            onPlayerTimeupdate(player) {
                // console.log('player Timeupdate!', player.currentTime())
            },
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            // or listen state event
            playerStateChanged(playerCurrentState) {
                // console.log('player current update state', playerCurrentState)
            },
            // player is ready
            playerReadied(player) {
                // seek to 10s
                console.log('example player 1 readied', player)
                player.currentTime(10)
                // console.log('example 01: the player is readied', player)
            },
            getBGImage(image) {
                return "background-image: url('" + image + "');"
            },
        },
        //点击图标刷新页面
        reload() {
            window.location.reload();
        },
    }
</script>

<style lang="scss" scoped>
    @import '../../style/mixin';

    .head_logo {
        left: 0.4rem;
        font-weight: 400;
        @include sc(0.7rem, #fff);
        @include wh(2.3rem, 0.7rem);
        @include ct;
    }

    .detail_container_template {
        background-color: white;
        .seperator {
            width: 100%;
            height: 2px;
            background-color: #dddddd;
            margin-top: 6px;
            margin-bottom: 6px;
        }

        .siteLogo {
            svg {
                height: 24px;
                width: 160px;
                fill: #EB1478;
            }
        }
        .single-row {
            padding: 0 16px;
        }
        .project-extra-info-container {
            margin-top: 26px;
        }
        .project-desc-container {
            margin-top: 26px;
            padding-left: 26px;
            .desc-container {
                padding-left: 26px;
                .tag {
                    span {
                        text-transform: uppercase;
                        color: #088366;
                        letter-spacing: 1px;
                        font-size: 14px;
                    }
                }
                .seperator {
                    width: 100%;
                    height: 2px;
                    background-color: #dddddd;
                    margin-top: 6px;
                    margin-bottom: 6px;
                }
                .title {
                    font-family: "Benton Sans Medium";
                    font-size: 28px;
                    line-height: 35px;
                    letter-spacing: 0;
                    font-weight: normal;
                    color: #2a2a2a;
                    margin-bottom: 16px;
                }
                .sub-title {
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 20px;
                    line-height: 26px;
                    letter-spacing: 0;
                    font-weight: normal;
                    color: #6a6a6a;
                }
                .owner-info {
                    margin-top: 30px;
                    .text {
                        margin-bottom: 10px;
                        text-transform: uppercase;
                        color: #6a6a6a;
                        font-family: "Benton Sans Medium";
                        font-size: 11px;
                        line-height: 14px;
                        letter-spacing: 1px;
                    }
                    .detail {
                        display: flex;
                        align-items: center;
                        margin-bottom: 30px;
                        .icon {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: url('~assets/profile.png') no-repeat;
                            background-size: 100% 100%;
                        }
                        .info {
                            .owner-name {
                                color: #2a2a2a;
                                font-weight: bold;
                                margin-top: 6px;
                                margin-bottom: 2px;
                            }
                        }
                    }
                }
                .campaign-info {
                    .funding-detail {
                        margin-bottom: 6px;
                        .num {
                            color: black;
                            font-weight: bold;
                            font-size: 18px;
                        }
                    }
                    .progress {
                        width: 100%;
                    }
                    .percent-detail {
                        margin-top: 6px;
                        .num {
                            color: black;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .project-overview-container {
            padding-left: 26px;
            .overview {
                margin-top: 46px;
                .tag {
                    span {
                        text-transform: uppercase;
                        letter-spacing: 1px;
                        font-size: 16px;
                        color: #6a6a6a;
                        margin-top: 20px;
                        margin-bottom: 20px;
                        padding-top: 5px;
                        padding-bottom: 5px
                    }
                }
                .seperator {
                    width: 100%;
                    height: 2px;
                    background-color: #dddddd;
                    margin-top: 6px;
                    margin-bottom: 6px;
                }
            }
            .detail-info {
                display: flex;
                margin-top: 10px;
                .img-info {
                    width: 247px;
                    height: 285px;
                    /*background: url('/static/img/test.jpg') no-repeat;*/
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
                .txt-info {
                    flex: 1;
                    padding-left: 26px;
                    .content {
                        font-size: 14px;
                        font-weight: normal;
                        line-height: 20px;
                    }
                }
            }
        }
        .interest-project-container {
            background-color: #f5f5f5;
            border-bottom: 1px solid #dddddd;
            border-top: 1px solid #dddddd;
            padding: 26px 0px;
            margin-top: 26px;
            .interest-item-container {
                flex: 1;
                .single-item {
                    margin: 26px;
                }
                .tag-container {
                    margin-bottom: 26px;
                    padding-left: 26px;
                    .tags-area {
                        margin-top: 16px;
                        .tag-item {
                            margin-left: 16px;
                        }
                    }
                }

            }
        }

    }
</style>